<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.0/jquery.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.10.0/index.js"></script> -->
    <script src="./template-web.js"></script>
  </head>
  <body>
    <table width="800" border="1" style="border-collapse: collapse">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>操作</th>
      </tr>
      <tbody>
      </tbody>
    </table>

    <a href="http://127.0.0.1/editUser/23">更新</a>

    <script type="text/html" id="tpl">
      {{ each data}}
      <tr>
        <td>{{$index + 1}}</td>
        <td>{{ $value.username }}</td>
        <td>
          <a href="javascript:;" class="del" id="{{$value.id}}"> 删除 </a>
        </td>
      </tr>
      {{/each}}
    </script>

    <script>
      function render() {
        $.ajax({
          type: "get",
          url: "http://127.0.0.1/getUser",
          success: function (res) {
            if (res.status === 0) {
              var html = template("tpl", res);
              console.log(html);
              $("tbody").html(html);
            }
          }
        });
      }

      render();

      $("table").on("click", "a", function () {
        // alert("ok");
        var id = $(this).prop("id");
        $.ajax({
          type: "delete",
          url: "http://127.0.0.1/delUser/" + id,
          success: function (res) {
            if (res.status === 0) {
              render();
            }
          }
        });
      });
    </script>
  </body>
</html>
